<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HMTL5学习邀请函</title>
	<style type="text/css">
		html,body{
			height: 100%;
			color: #ffffff;
			font-family:sans-serif;
		}
		body{
			position:relative;
			background:url(images/background.jpg) center center;
			background-size: cover; 
			margin:0;
			padding:0;
		}
		#container{
			position:absolute;
			width:100%;
			text-align:center;	
			top:50%;
			transform:translateY(-50%);
			/*浏览器兼容处理*/
			-ms-transform:translateY(-50);	/* IE 9*/
			-moz-transform: translateY(-50);	/* Firefox */
			-webkit-transform:translateY(-50);	/* Safari of Chrome */
			-o-transform:translate(-50);		/* Opera */
		}
		h1{
			font-size:54px;
			text-transform:uppercase;
			margin-bottom:20px;
		}
		p{
			font-size:21px;
			margin-bottom:40px;
		}
		a{
			font-size:18px;
			color: #fff;
			border:1px solid #fff;
			border-radius: 3px;
			padding:10px 100px;
			text-decoration:none;
		}
	</style>

</head>
<body>
	<div id="container">
		<h1>Let's Learn HMTL5</h1>
		<p>发挥您的美感与想象力，探索Web开发的无限可能性，现邀请您一同踏上HTML5的学习之路。</p>
		<a href="invite.php" id="enroll">邀您参加</a>
	</div>
	<script type="text/javascript">
		var enroll = document.getElementById("enroll");
		enroll.onclick = function(e){
			e.preventDefault();
			enroll.innerHTML = "报名成功";
			enroll.style.background = "#27cb8b";
			enroll.style.borderColor = "#27cb8b";
		}

	</script>
</body>
</html>